<template>
  <div class="container">
    <el-form label-position="left" ref="elForm" class="ml-3" :model="form" :rules="rules" size="medium" label-width="100px">
<!--      <el-form-item label="启用状态">-->
<!--        <select v-model="form.enable" placeholder="">-->
<!--          <option label="关闭" :value='0'></option>-->
<!--          <option label="开启" :value='1'></option>-->
<!--        </select>-->
<!--      </el-form-item>-->
      <el-form-item label="波特率">
        <select v-model="form.baudRate" placeholder="">
          <option label="1200" :value=1200></option>
          <option label="2400" :value=2400></option>
          <option label="4800" :value=4800></option>
          <option label="9600" :value=9600></option>
          <option label="19200" :value=19200></option>
          <option label="38400" :value=38400></option>
          <option label="57600" :value=57600></option>
          <option label="115200" :value=115200></option>
        </select>
      </el-form-item>
      <el-form-item label="数据位">
        <select v-model="form.dataBits" placeholder="">
          <option label="5" :value=5></option>
          <option label="6" :value=6></option>
          <option label="7" :value=7></option>
          <option label="8" :value=8></option>
        </select>
      </el-form-item>
      <el-form-item label="停止位">
        <select v-model="form.stopBits" placeholder="">
          <option label="1" :value=1></option>
          <option label="2" :value=2></option>
        </select>
      </el-form-item>
      <el-form-item label="奇偶校验">
        <select v-model="form.parityType" placeholder="">
          <option label="无" value="none"></option>
          <option label="奇校验" value="odd"></option>
          <option label="偶校验" value="even"></option>
        </select>
      </el-form-item>
      <el-form-item label="控制模式">
        <select v-model="form.mode" placeholder="">
          <option label="透传模式" :value="0"></option>
          <option label="云台模式" :value="1"></option>
          <option label="LED" :value="2"></option>
        </select>
      </el-form-item>
<!--      <el-form-item label="流控">-->
<!--        <select v-model="form.flowCtrl" placeholder="">-->
<!--          <option label="none" value="none"></option>-->
<!--        </select>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="button">-->
<!--        <el-button @click="" style="width: 100px">取消</el-button>-->
        <el-button class="!mt-8" type="primary" @click="save()" style="width: 120px; margin-left: 0px">保存</el-button>
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  import { get485,set485 } from "@/api/device/system";
export default {
  name: 'index',
  data() {
    return {
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        enable:undefined,
        dataBits:undefined,
        baudRate:"",
        stopBits:undefined,
        parityType:undefined,
        flowCtrl:undefined,
        mode:undefined,
      },
      rules: {
      },
    }
  },
  created() {
    get485().then(res =>{
      this.form = res.data;
    })
  },
  methods: {
    save(){
      set485(this.form).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
      }).catch(err => {
        this.$message.error('保存失败');
      });
    }
  },
  computed: {
    enableValue: {
      get() {
        return String(this.form.enable);  // Convert to string for comparison
      },
      set(value) {
        this.form.enable = Number(value); // Convert back to number for data
      }
    }
  },
}
</script>

<style scoped>
.container {
}
.button {
  margin-top: 5%;
}
select {
  width: 202px;
}
</style>
